<template>
  <div>
    <!--        面包屑导航-->
    <breadcrumb :navData="navData"></breadcrumb>
    <el-card>
      <el-row :gutter="13">
        <el-col :span="10">
          <el-input
            placeholder="请输入内容"
            class="input-with-select"
            v-model="clas_msg.type"
            clearable
            @clear="getclas_list"
          >
            <el-button slot="append" icon="el-icon-search" @click="getclas_list"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="addclas">添加分类</el-button>
          </div>
          <!-- 嵌套的表单 -->
          <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
            <el-form :model="clas_form" :rules="rules" ref="clas_form">
              <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="clas_form.cat_name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="父级分类" prop="cat_name">
                <el-cascader
                  v-model="value"
                  :options="options"
                  :props="cas_pop"
                  @change="handleChange"
                  clearable
                ></el-cascader>
              </el-form-item>
            </el-form>
            <div slot="footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="clasform_ok">确 定</el-button>
            </div>
          </el-dialog>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="table_clas" border style="width: 100%" row-key="cat_id">
        <el-table-column label="#" width="50" type="index"></el-table-column>
        <el-table-column prop="cat_name" label="分类名称"></el-table-column>
        <el-table-column prop="cat_deleted" label="是否有效" width="140px">
          <template slot-scope="scope">
            <i
              style="color: rgb(73, 186, 73)"
              v-if="!scope.row.cat_deleted"
              class="el-icon-success"
            ></i>
            <i style="color:rgb(152, 56, 43);" v-else class="el-icon-error"></i>
          </template>
        </el-table-column>
        <el-table-column prop="cat_level" label="排序" width="140px">
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level === 0" effect="dark">一级</el-tag>
            <el-tag size="mini" v-if="scope.row.cat_level === 1" type="success" effect="dark">二级</el-tag>
            <el-tag size="mini" v-if="scope.row.cat_level === 2" type="warning" effect="dark">三级</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140px">
          <!-- template -->
          <template slot-scope="scope">
            <!-- 编辑用户 -->
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
            <!-- 删除 -->
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 嵌套的表单 -->
      <el-dialog title="修改分类" :visible.sync="editformVisible">
        <el-form :model="edit_form" :rules="edit_rules" ref="edit_form">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="edit_form.cat_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="editformVisible = false">取 消</el-button>
          <el-button type="primary" @click="editform_ok">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="clas_msg.pagenum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="clas_msg.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "VueShopsCategories",

  data() {
    return {
      navData: ["商品管理", "商品分类"],
      table_clas: [],
      clas_msg: {
        type: "",
        pagenum: 1,
        pagesize: 2,
      },
      // 总条数
      total: 0,
      // 添加弹出
      dialogFormVisible: false,
      // 编辑弹出
      editformVisible: false,
      // 添加表单
      clas_form: {
        cat_pid: "",
        cat_name: "",
        cat_level: "",
      },
      // 修改表单
      edit_form: {
        cat_name: "",
      },
      rules: {
        cat_name: [
          { required: true, message: "分类名称不能为空", trigger: "blur" },
          { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
        ],
      },
      edit_rules: {
        cat_name: [
          { required: true, message: "分类名称不能为空", trigger: "blur" },
          { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
        ],
      },
      // 级联选择器v-model
      value: [],
      options: [],
      // 级联选择器配置
      cas_pop: {
        checkStrictly: true,
        expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      curEditId: "",
    };
  },

  mounted() {},
  created() {
    this.getclas_list();
  },
  methods: {
    // 表格数据
    async getclas_list() {
      const clas = await this.axios.get("/categories", {
        params: this.clas_msg,
      });
      console.log(clas);
      this.total = clas.data.data.total;
      this.table_clas = clas.data.data.result;
    },
    // 添加分类按钮
    async addclas() {
      this.dialogFormVisible = true;
      const cascader = await this.axios.get("/categories", {
        params: { type: 2 },
      });
      console.log(cascader);
      this.options = cascader.data.data;
    },
    // 连级选择器hover
    handleChange(value) {
      console.log(value);
      if (value.length > 0) {
        this.clas_form.cat_pid = value[value.length - 1];
        this.clas_form.cat_level = value.length;
      } else {
        this.clas_form.cat_pid = "0";
        this.clas_form.cat_level = "0";
      }

      console.log(this.clas_form.cat_level);
      console.log(this.clas_form.cat_pid);
    },
    // 添加确定
    async clasform_ok() {
      this.$refs.clas_form.validate(async (valid) => {
        if (valid) {
          const clser_data = await this.axios.post(
            "categories",
            this.clas_form
          );
          console.log(clser_data);
          if (clser_data.data.meta.status == 201) {
            this.$message.success("添加成功");
          }
          this.clas_form.cat_name = "";
          this.value = [];
          this.getclas_list();
          this.dialogFormVisible = false;
        }
      });
    },
    // 修改点击
    edit(row) {
      console.log(row);
      this.edit_form.cat_name = row.cat_name;
      this.curEditId = row.cat_id;
      this.editformVisible = true;
    },
    // 修改确定
    async editform_ok() {
      this.$refs.edit_form.validate(async (valid) => {
        if (valid) {
          const edit_data = await this.axios.put(
            `categories/${this.curEditId}`,
            this.edit_form
          );
          console.log(edit_data);
          if (edit_data.data.meta.status == 200) {
            this.$message.success("修改成功");
            this.getclas_list();
            this.editformVisible = false;
          } else {
            this.$message.error("修改失败");
          }
        }
      });
    },

    // 删除点击
    async del(row) {
      console.log(row);
      const dell_data = await this.axios.delete(`categories/${row.cat_id}`);
      if (dell_data.data.meta.status == 200) {
        this.$message.success("删除成功");
        this.getclas_list();
      } else {
        this.$message.error("删除失败");
      }
    },
    // 每页几条
    handleSizeChange(val) {
      this.clas_msg.pagesize = val;
      this.getclas_list();
    },
    // 哪一页
    handleCurrentChange(val) {
      this.clas_msg.pagenum = val;
      this.getclas_list();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>